﻿@page "/templates/getting-started"
@page "/templates/development-prerequisites"
@page "/boilerplate/getting-started"
@page "/boilerplate/development-prerequisites"
@inherits AppComponentBase

<PageOutlet Url="templates/getting-started"
            Title="Getting started - Templates"
            Description="Getting started with the project templates on the bit platform" />

<div class="page-container">
    <BitText Typography="BitTypography.H3" Gutter>Getting started</BitText>
    <br />

    <section class="section-card">
        <div class="section-card-txt">
            <BitText Typography="BitTypography.H5" Gutter>Setup your development environment</BitText>
            <br />
            <BitPivot>
                <BitPivotItem HeaderText="Easy setup">
                    <br />
                    <BitText Typography="BitTypography.H6" Gutter>
                        For Windows: Visual Studio & Visual Studio Code
                    </BitText>
                    <br />
                    <BitText Typography="BitTypography.Body1" Gutter>
                        To streamline your development setup, we’ve simplified the installation process into a straightforward sequence of commands.
                        These components are installed via the <a href="https://aka.ms/getwinget" target="_blank">Windows Package Manager (WinGet)</a>, which comes pre-installed on Windows 11.
                        <br /><br />
                        The default commands listed below are required for Web & API development, however,
                        you can choose other options too, then click the Copy button and paste them into
                        the Windows PowerShell as an Administrator to run.
                    </BitText>
                    <br />
                    <BitStack HorizontalAlign="BitAlignment.Start">
                        <BitCheckbox Label="Cross-platform development" @bind-Value="enableCrossPlatform" />
                        <BitCheckbox Label="Virtualization (Docker, WSL, Android Emulators)" @bind-Value="enableVirtualization" />
                        <BitCheckbox Label="Visual Studio" @bind-Value="installVs" />
                        <BitCheckbox Label="Visual Studio Code" @bind-Value="installVsCode" />
                    </BitStack>
                    <br /><br />
                    <BitText Typography="BitTypography.H5" Gutter>Installation Script</BitText>
                    <BitButton IconName="ChevronRight" OnClick="CopyCommandsToClipboard">@copyButtonText</BitButton>
                    <CodeBox MaxHeight="300px" HideCopyButton>@GetDisplayableSelectedCommands()</CodeBox>
                    @if (installVs)
                    {
                        <br />
                        <BitText Typography="BitTypography.H5" Gutter>Visual Studio Extensions</BitText>
                        <div class="section-card-txt">
                            Install the following extensions for Visual Studio to have a better development experience:
                            <ol>
                                <li>
                                    <a href="https://marketplace.visualstudio.com/items?itemName=TomEnglert.ResXManager" target="_blank">ResXManager</a>
                                </li>
                            </ol>
                        </div>
                    }
                    @if (enableVirtualization)
                    {
                        <BitText Typography="BitTypography.H5" Gutter>Virtualization Instructions</BitText>
                        <div>
                            Make sure Virtualization is enabled on your system:
                            <br />
                            <br />
                            <div class="image-container">
                                <img class="image" src="images/templates/virtualization.webp" />
                            </div>
                            If this feature shown as not enabled in <i>Task Manager</i>, please refer to the following video:
                            <br />
                            <br />
                            <div class="video-container">
                                <iframe src="https://www.youtube.com/embed/ZDeje9wgDp4"
                                        width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                                </iframe>
                            </div>
                            <br />
                        </div>
                    }
                </BitPivotItem>
                <BitPivotItem HeaderText="Step-by-step setup">
                    <br />
                    <BitText Typography="BitTypography.H6" Gutter>
                        Step-by-step instructions for:
                    </BitText>
                    <BitStack Horizontal HorizontalAlign="BitAlignment.Start">
                        <BitPivot HeaderOnly OnItemClick="@(item => devOS = item.Key!)">
                            <BitPivotItem HeaderText="Windows" Key="Windows"></BitPivotItem>
                            <BitPivotItem HeaderText="macOS" Key="macOS"></BitPivotItem>
                            <BitPivotItem HeaderText="Linux" Key="Linux"></BitPivotItem>
                        </BitPivot>
                    </BitStack>
                    <br />
                    <BitToggle Inline Label="Show cross-platform development steps" @bind-Value="showCrossPlatform" />
                    <ol>
                        <li style="margin-bottom:8px">
                            Install latest <a href="https://dotnet.microsoft.com/en-us/download/dotnet/9.0" target="_blank">.NET SDK</a>
                            @if (devOS is "Linux")
                            {
                                <br />
                                <BitAccordion Title="Ubuntu instructions">
                                <CodeBox>wget https://builds.dotnet.microsoft.com/dotnet/Sdk/10.0.100/dotnet-sdk-10.0.100-linux-x64.tar.gz -O $HOME/dotnet.tar.gz
mkdir -p $HOME/.dotnet
tar zxf $HOME/dotnet.tar.gz -C "$HOME/.dotnet"
echo 'PATH=$HOME/.dotnet:$HOME/.dotnet/tools:$PATH' >> ~/.bashrc
export PATH=$HOME/.dotnet:$HOME/.dotnet/tools:$PATH
rm $HOME/dotnet.tar.gz</CodeBox>
                                </BitAccordion>
                            }
                        </li>
                        @if (devOS is "Linux")
                        {
                            <li style="margin-bottom:8px">
                                Install python
                                <div>Ensure the `python --version` command works. While Ubuntu comes with Python 3 pre-installed, you need to create a symbolic link to use the `python` command. Use the following command:</div>
                                <CodeBox>sudo apt update sudo apt install python-is-python3</CodeBox>
                            </li>
                        }
                        <li>Install <a href="@( devOS is "Windows" ? "https://nodejs.org/en/download/prebuilt-installer" : "https://nodejs.org/en/download/package-manager")" title="Node.js" rel="nofollow">Node.js</a></li>
                        <br />
                        <li>
                            <div style="margin-bottom:8px">Install .NET workloads</div>
                            @if (showCrossPlatform)
                            {
                                @if (devOS is "Windows")
                                {
                                    <CodeBox>dotnet workload install maui<br />dotnet workload install wasm-tools</CodeBox>
                                }
                                else if (devOS is "Linux")
                                {
                                    <CodeBox>dotnet workload update<br />dotnet workload install maui-android<br />dotnet workload install wasm-tools</CodeBox>
                                }
                                else
                                {
                                    <CodeBox>sudo dotnet workload install maui<br />sudo dotnet workload install wasm-tools</CodeBox>
                                }
                            }
                            else
                            {
                                @if (devOS is "Windows")
                                {
                                    <CodeBox>dotnet workload install wasm-tools</CodeBox>
                                }
                                else if (devOS is "Linux")
                                {
                                    <CodeBox>dotnet workload update<br />dotnet workload install wasm-tools</CodeBox>
                                }
                                else
                                {
                                    <CodeBox>sudo dotnet workload install wasm-tools</CodeBox>
                                }
                            }
                        </li>
                        <li>
                            <div style="margin-bottom:8px">Install <a href="https://www.nuget.org/packages/Bit.Boilerplate" target="_blank">Bit Boilerplate</a> project template</div>
                            <CodeBox>dotnet new install Bit.Boilerplate::10.2.0</CodeBox>
                        </li>
                        @if (showCrossPlatform && devOS is "Windows")
                        {
                            <li>
                                Enable long paths files in Windows
                                <CodeBox>reg add "HKLM\SYSTEM\CurrentControlSet\Control\FileSystem" /v LongPathsEnabled /t REG_DWORD /d 1 /f <BitButton Class="link-btn" Size="BitSize.Small" IconName="ArrowUpRight" Href="https://learn.microsoft.com/en-us/windows/win32/fileio/maximum-file-path-limitation" Target="_blank" Variant="BitVariant.Text" /></CodeBox>
                            </li>
                            <li>
                                Enable Windows developer mode
                                <CodeBox>reg add "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /v AllowDevelopmentWithoutDevLicense /t REG_DWORD /d 1 /f <BitButton Class="link-btn" Size="BitSize.Small" IconName="ArrowUpRight" Href="https://learn.microsoft.com/en-us/windows/apps/get-started/developer-mode-features-and-debugging" Target="_blank" Variant="BitVariant.Text" /></CodeBox>
                            </li>
                        }
                    </ol>
                    <br />
                    @if (devOS is "Windows")
                    {
                        <BitText Typography="BitTypography.H5" Gutter>Virtualization Instructions (Docker, WSL, Android Emulators)</BitText>
                        <ol>
                            <li>
                                Make sure Virtualization is enabled on your system:
                                <br />
                                <div class="image-container">
                                    <img class="image" src="images/templates/virtualization.webp" />
                                </div>
                            </li>
                            <li>
                                If this feature shown as not enabled in <i>Task Manager</i>, please refer to the following video:
                                <br />
                                <br />
                                <div class="video-container">
                                    <iframe src="https://www.youtube.com/embed/ZDeje9wgDp4"
                                            width="560" height="315" title="YouTube video player" frameborder="0" allowfullscreen
                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                                    </iframe>
                                </div>
                                <br />
                            </li>
                        </ol>
                    }
                    <BitText Typography="BitTypography.H5" Gutter>IDE specific requirements</BitText>
                    <br />
                    @if (devOS is "Windows")
                    {
                        <BitText Typography="BitTypography.H6" Gutter>Visual Studio</BitText>
                        <BitStack Horizontal VerticalAlign="BitAlignment.Start" HorizontalAlign="BitAlignment.Start">
                            <div class="section-card-txt">
                                <ul>
                                    <li>
                                        <a href="https://visualstudio.microsoft.com/downloads/" target="_blank">Microsoft Visual Studio</a> 2026 - Version 18.0 or higher
                                        <ul dir="auto">
                                            <li>
                                                Workloads:
                                                <ul dir="auto">
                                                    <li>ASP.NET and web development</li>
                                                    @if (showCrossPlatform)
                                                    {
                                                        <li>.NET Multi-Platform App UI development + Android Sdk setup</li>
                                                    }
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            @if (showCrossPlatform)
                            {
                                <img class="image" alt="VS Setup" src="/images/templates/vs-setup.webp" />
                            }
                        </BitStack>
                    }
                    <BitText Typography="BitTypography.H6" Gutter>VS Code</BitText>
                    <div class="section-card-txt">
                        <ul>
                            <li>
                                <a href="https://code.visualstudio.com/#alt-downloads" title="VS Code" rel="nofollow">Visual Studio Code</a> with following extensions:
                                <ul dir="auto">
                                    <li><a href="https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass" title="Live Sass Compiler" rel="nofollow">Live Sass Compiler</a></li>
                                    @if (showCrossPlatform)
                                    {
                                        <li><a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.dotnet-maui" title=".NET MAUI" rel="nofollow">.NET MAUI</a></li>
                                    }
                                </ul>
                            </li>
                        </ul>
                    </div>
                </BitPivotItem>
            </BitPivot>
        </div>
    </section>
</div>

<NavigationButtons Prev="Overview" PrevUrl="/templates/overview" Next="Project structure" NextUrl="/templates/project-structure" />